import React, { Component } from 'react';
import { Card } from 'antd';
import {Link} from 'react-router-dom';
import Pagination from '../../util/pagination';
import TableList from '../../util/table-list';

import Mutil from '../../util/mm.js';
import Order from '../../server/order.js';
import ListSearch from './index-list-search';


const _mm = new Mutil();
const _order= new Order();

class OrderList extends Component{
	constructor(props){
		super(props);
		this.state = {
			list     : [],
			pageNum  : 1,
			listType : 'list'  //list或者是search
		}
	}
	componentDidMount(){
		this.loadOrderList();
	}
	loadOrderList(){	
		let listParam ={};
		listParam.listType = this.state.listType;
		listParam.pageNum  = this.state.pageNum;
		//如果搜索的话，需要传入搜索类型和搜索关键字
		if(this.state.listType === 'search'){
			listParam.orderNo = this.state.orderNumber;
		}
		_order.getOrderList(listParam).then((res)=>{
			this.setState(res)
		},errMag =>{
			this.setState({
				list: []
			})
			_mm.errorTips(errMag)
		});
	}
	//搜索
	onSearch(orderNumber){
		let listType = orderNumber === '' ? 'list' : 'search';
		this.setState({
			listType : listType,
			pageNum : 1,
			orderNumber : orderNumber
		}, ()=>{
			this.loadOrderList();
		})
	}
	//当页数发生变化的时候
	onPageNumChange(pageNum){
		this.setState({
			pageNum: pageNum
		}, ()=>{
			this.loadOrderList()
		})
	}
	
	render() {
		let tableHeads = ['订单号','收件人','订单状态','订单总价','创建时间','操作'];
		return (
			<Card title="商品列表">
				<ListSearch onSearch={(orderNumber) => {this.onSearch(orderNumber)} } />
				<TableList tableHeads = {tableHeads}>
					{this.state.list.map((order, index)=>{
						return(
							<tr key={index}>
								<td>
									<Link to={`/order/detail/${order.orderNo}`}>{order.orderNo}</Link>
								</td>
								<td>{order.receiverName}</td>
								<td>{order.statusDesc}</td>
								<td>￥{order.payment}</td>
								<td>{order.createTime}</td>
								<td>
									<Link to={`/order/detail/${order.orderNo}`}>详情</Link>
								</td>
							</tr>
						);
					})}
				</TableList>
				<Pagination
					current={this.state.pageNum}
					total={this.state.total}
					onChange={(pageNum)=>this.onPageNumChange(pageNum)}
				 />
			</Card>
		);
	}
}

export default OrderList;